<!DOCTYPE html>
<html>
<head>
    {% load staticfiles %}
	<meta charset="utf-8">
	<title>
		设备监控
	</title>
    <script src = "../../static/js/echarts.min.js"></script>
    <script src="../../static/js/jquery.js"></script>
	<script src="../../static/js/echarts.min.js"></script>
	<script src="../../static/js/proj-function.js"></script>
	<script src="../../static/js/heard.js"></script>
	<link rel="stylesheet" type="text/css" href="../../static/css/all-set.css">
    <script type="text/javascript">
        device_list = {{ device_list|safe }};
    </script>
{#	<script src="img/jquery.js"></script>#}
{#	<script src="img/echarts.min.js" ></script>#}
{#	<script src="img/proj-function.js"></script>#}
{#	<link rel="stylesheet" type="text/css" href="img/all-set.css">#}
</head>
<body>

<div class="public">
	<div class="public_heard">
		<a id="link_to_device" href="#">设备监控</a>
		<a id="link_to_alarm" href='#'>报警查询</a>
		<a id="link_to_history" href='#'>历史数据</a>
		<a id="link_to_setting" href='#'>系统设置</a>
		<a id="link_to_user_setting" href="#">用户设置</a>
	</div>
<div style="visibility: hidden; height: 0px;">
	<label>登录用户ID: </label>
	<label id="user_id">{{user_id}}</label>
</div>
<div class="public_body">
	<div class="public_table">
{#		<img src="../../static/img/eg_table.png">#}
		<table>
		   <thead>
		        <th>设备ID</th>
				<th>设备名称</th>
				<th>安装地址</th>
				<th>当前状态</th>
				<th>设备描述</th>
				<th>上传时间</th>
				<th>监控数据</th>
				<th>报警状态</th>
		    </thead>
		    {% for device in device_list %}
		        <tr class="item_list">
					<td>{{device.id}}</td>
					<td>{{device.name}}</td>
					<td>{{device.address}}</td>
					<td>{{device.state}}</td>
					<td>{{device.description}}</td>
					<td>{% for sensor in device.sensors %}
                        {% if forloop.first %}
                            {{ sensor.datetime }}
                        {% endif %}
                        {% endfor %}
                    </td>
                    <td>{% for sensor in device.sensors %}
                        {{ sensor.name }}: {{ sensor.value }}
                        {% if not forloop.last %}
                            ,
                        {% endif %}
                        {% endfor %}
                     </td>
{#		            <td>{{device.sensors }}</td>#}
		            <td>
		                <a class="link_item" href="#">
                           {% for sensor in device.sensors %}
                            {% if forloop.first %}
                                {{ sensor.alarm }}
                            {% endif %}
                            {% endfor %}
                        </a>
		            </td>
		        </tr>
			{% endfor %}
		</table>
	</div>
    <div class="from_paging" >
    <button  class="btn" id="prev_page" onclick="pageClick(1)">上一页</button>
    第<span id="current_page">{{ page_id }}</span>/<span id="total_page">{{ page_num }}</span>页
    <button  class="btn" id="next_page"  onclick="pageClick(2)">下一页</button>
</div>
	<div class="charts">
    <script src="../../static/js/charts-device.js"></script>
{#	<script src="img/charts-device.js"></script>	#}
    </div>
</div>
</div>
</body>
</html>